<template>
    <div class="header">
      <div class="header2">新增题目</div>
      <el-button @click="documentIn" text class="document">文件导入<el-icon><DocumentAdd /></el-icon></el-button>
    </div>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="题目" prop="topic" required>
        <el-input v-model="ruleForm.topic" />
      </el-form-item>
      <el-form-item label=" 试题类型" prop="type" required>
        <el-select v-model="ruleForm.type" placeholder="">
          <el-option label="单选题" value="1" />
          <el-option label="多选题" value="2" />
          <el-option label="判断题" value="3" />
          <el-option label="分析题" value="4" />
        </el-select>
      </el-form-item>
<!--       <el-form-item label="分值" prop="score" required>
       
        <el-select v-model="ruleForm.score" placeholder="请选择分值">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
      </el-form-item> -->
      
      <el-form-item label="A" prop="optionA">
        <el-input v-model="ruleForm.optionA" />
      </el-form-item>
      <el-form-item label="B" prop="optionB">
        <el-input v-model="ruleForm.optionB" />
      </el-form-item>
      <el-form-item label="C" prop="optionC">
        <el-input v-model="ruleForm.optionC" />
      </el-form-item>
      <el-form-item label="D" prop="optionD">
        <el-input v-model="ruleForm.optionD" />
      </el-form-item>
      <el-form-item label="标准答案" prop="answer" required>
        <el-input v-model="ruleForm.answer" />
      </el-form-item>
      <el-form-item label="答案解析" prop="parse" >
        <el-input v-model="ruleForm.parse" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" :rows="4" v-model="ruleForm.remark" />
      </el-form-item>
      
      <el-form-item>

        <el-button type="primary"  plain @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { interceptor } from '@/utils/interceptor'
import { useRouter } from 'vue-router'
import { userStore } from '@/stores/userStore'
import QuestionIn from './QuestionIn.vue'

  
  interface RuleForm {
    topic: string
    score: string
    type: string
    optionA: string
    optionB: string
    optionC: string
    optionD: string
    answer:string
    parse:string
    remark:string
   
  }
  
  const router = useRouter()
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    topic: '',
    score: '',
    type: '',
    optionA: '',
    optionB: '',
    optionC: '',
    optionD: '',
    answer:'',
    parse:'',
    remark:'',
  })
  
  const rules = reactive<FormRules<RuleForm>>({
    topic: [
      { required: true, message: '请输入课程名', trigger: 'blur' },
      { min: 2, max: 25, message: '长度应在2-25范围内', trigger: 'blur' },
    ],
    score: [
      {
        required: true,
        message: '请设置分值',
        trigger: 'change',
      },
    ],
    type: [
      {
        required: true,
        message: '请选择试题类型',
        trigger: 'change',
      },
    ],
    optionA: [], // 根据需求添加验证规则
    optionB: [],
    optionC: [],
    optionD: [],
    answer: [
      {
        required: true,
        message: '请输入标准答案',
        trigger: 'blur',
      },
    ],
    parse: [],
    remark: [],
  })
  
  //处理提交验证逻辑
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')

        const formData = {
          id:'',
          topic: ruleForm.topic,
         /*  score: ruleForm.score, */
          score: ruleForm.type ==='1'? 5:ruleForm.type ==='2'? 5 :ruleForm.type=='3'? 3:20,
          type: ruleForm.type,
          optionA: ruleForm.optionA,
          optionB: ruleForm.optionB,
          optionC: ruleForm.optionC,
          optionD: ruleForm.optionD,
          answer:ruleForm.answer,
          parse:ruleForm.parse,
          remark:ruleForm.remark,
        }

        const httpInstance = interceptor()
        httpInstance.post('/teacher/question',formData)
         .then(Response => {
          alert("题目添加成功！")
          console.log("提交成功：",Response.data);
         })
         .catch(error => {
          console.error("提交失败：",error);
         })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const options = Array.from({ length: 50 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }))

  //文件导入
  const documentIn = ()=>{
    router.push({
      name: 'questionIn'
    })
  }
  </script>

  <style scoped>
 .header {
    display: flex;
    align-items: center;
    padding: 5px;
    border-left: 2px solid #409EFF;
  }

  .header2 {
    margin-left: 5px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .el-button{
      display: flex;
      margin: 0 30% 0 50%; 
    }

  .el-form{
        width:100%;
        height: 80%;
        margin:80px 30% 0 23%;
        overflow: hidden;
    }

  ::v-deep .el-form-item__label{
    font-size:18px;

  }

  .document{
    color:rgb(245, 156, 23);
    font-size:20px;
    margin-left:0;
  }
</style>
  